
<%= stylesheet_link_tag 'dashboard_p' %>

<div style="position: relative; width: 100%; height: 500px; border: 1px #ccc solid;">
    <div dojoType="dijit.layout.BorderContainer" gutters="true" id="borderContainerTwo">
        <div dojoType="dijit.layout.ContentPane" region="top" splitter="false">
			<button style="float:left;" dojoType="dijit.form.Button" onClick="handle_add_gadget()">+ Add Gadget</button>
        </div>
		
        <div dojoType="dijit.layout.BorderContainer" liveSplitters="false" design="sidebar" region="center" id="mainSplit">
            
			<div dojoType="dojox.layout.ExpandoPane" 
				 splitter="false" 
				 duration="500" 
				 region="left"
				 id="leftPane"
				 maxWidth="275" 
				 style="width: 275px;"
				 easeOut="dojo._DefaultEasing"
				 easeIn="dojo._DefaultEasing"
				 startExpanded="false"
				 title="Gadgets">
				 

				<div dojoType="dijit.layout.AccordionContainer" 
					 style="width: 300px;" 
					 id="leftAccordion" 
					 region="leading" 
					 splitter="true">
					 
	                <div dojoType="dijit.layout.AccordionPane" title="Internet">
	                	<ul class="gadget_list">
		                	<li class="gadget_listing">

		                			<div>
			                		<div class="gadget_icon"><%= image_tag 'yammer_icon.jpg' %></div>
			                		<div class="gadget_name">
			                			Yammer Gadget<br/>
										<a href="">Info</a>&nbsp;&nbsp;
										<a href="">Add</a>
									</div>
									</div>

							</li>
		                	<li class="gadget_listing">

			                		<div class="gadget_icon"><%= image_tag 'twitter_icon.jpg' %></div>
			                		<div class="gadget_name">
			                			Twitter Gadget<br/>
										<a href="">Info</a>&nbsp;&nbsp;
										<a href="">Add</a>
									</div>

							</li>
		                	<li class="gadget_listing">

			                		<div class="gadget_icon"><%= image_tag 'linkedin_icon.jpg' %></div>
			                		<div class="gadget_name">
			                			LinkedIn Gadget<br/>
										<a href="">Info</a>&nbsp;&nbsp;
										<a href="">Add</a>
									</div>

							</li>
		                	<li class="gadget_listing">

			                		<div class="gadget_icon"><%= image_tag 'delicious_icon.jpg' %></div>
			                		<div class="gadget_name">
			                			Delicious Gadget<br/>
										<a href="">Info</a>&nbsp;&nbsp;
										<a href="">Add</a>
									</div>

							</li>
						</ul>
	                </div>
	                <div dojoType="dijit.layout.AccordionPane" title="Sample">
		                	<li class="gadget_listing">
		                		<div class="gadget_icon"><%= image_tag 'generic_icon.jpg' %></div>
		                		<div class="gadget_name">
		                			Hello World Gadget<br/>
									<a href="">Info</a>&nbsp;&nbsp;
									<a href="">Add</a>
								</div>
							</li>
	                </div>
	                <div dojoType="dijit.layout.AccordionPane" title="Entertainment" selected="true">
	                </div>
	                <div dojoType="dijit.layout.AccordionPane" title="HR">
	                </div>
	            </div>
			</div>

            <div dojoType="dijit.layout.LayoutContainer" region="center">
                <div id="gadget_content_pane" dojoType="dijit.layout.ContentPane">
                </div>
            </div>
        </div>
    </div>
</div>

<%= javascript_include_tag 'dashboard' %>

<script>
	var gadget_list = eval('<%= @gadget_json %>');
	init_gadgets(gadget_list);
</script>

